<template>
  <view class="myfriend u-skeleton">
    <u-navbar title="极客闪卡记录" :background="{
      'backgroundColor': '#fff'
    }" :is-fixed='true' :borderBottom="false" class="u-skeleton-rect">
    </u-navbar>
    <view class="content-box">
      <diy-scorll :Empty='friendList.length ? false : true' :status='status' @scrolltolower='getmanager'
        @refresherrefresh='refresherrefresh' :is_display='friendList.length'>
        <view class="item" v-for="(item, index) in friendList" :key="index">
          <view class="left">
            <image :src="$util.img(item.image)" mode="widthFix"></image>
          </view>
          <view class="right">
            <view class="title">{{ item.card_name }}</view>
            <view class="time">{{ item.create_time }}</view>
          </view>

        </view>
      </diy-scorll>
    </view>
    <u-skeleton :loading="loding" :animation="true" bgColor="#FFF"></u-skeleton>
  </view>
</template>
<script>
export default {
  data() {
    return {
      loding: true, //初始化骨架屏展示
      // 列表下面文字状态
      status: 'loadmore',
      // 好友列表
      friendList: [],
      //参数配置
      page: {
        page: 1,
        page_size: 10,
      }
    }
  },
  onShow() {
    this.refresherrefresh();
  },
  methods: {
    //数据切换
    select(type) {
      this.current = type;
      this.refresherrefresh();
    },
    // 下拉双薪
    refresherrefresh(callback) {
      this.page = {
        page: 1,
        page_size: 10,
      },
        this.getmanager(callback);
    },
    // 或许商品列表
    getmanager(callback) {
      this.$http.asyncSendrequest({
        url: '/goods/drawLog',
        data: {
          ...this.page
        },
        success: res => {
          if (res.code == '0') {
            if (this.page.page == 1) this.friendList = [];
            if (res.data.length) {
              this.friendList = this.friendList.concat(res.data);
              this.page.page += 1;
            } else {
              //下面加载的文字
              this.status = 'nomore';
            }
            if (typeof callback == 'function') callback();
            this.loding = false;
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.myfriend {
  min-height: 100vh;

  .top {
    height: 80rpx;
    padding: 10rpx;
    margin: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F8F8F8;
    border-radius: 80rpx;

    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      width: 30%;
      height: 100%;
      border-radius: 60rpx;
      font-weight: bold;
    }
  }

  .content-box {
    margin: 30rpx;
    height: calc(100vh - 160rpx);
    background: #fff;
    border-radius: 10rpx;
    padding: 30rpx;

    .item {
      min-height: 100rpx;
      padding: 30rpx;
      border-radius: 10rpx;
      margin-bottom: 30rpx;
      border-bottom: 1rpx solid rgba(0, 0, 0, .05);
      display: flex;

      .left {
        width: 70rpx;
        margin-right: 20rpx;

        image {
          width: 100%;
        }
      }

      .right {
        .title {
          font-size: 28rpx;
          margin-bottom: 20rpx;
          font-weight: bold;
        }

        .time {
          font-size: 22rpx;
          color: rgba(0, 0, 0, .4);
        }
      }
    }
  }
}
</style>